<!--
 * @Author: 码上talk|RC
 * @Date: 2021-08-04 17:34:56
 * @LastEditTime: 2021-10-11 17:29:54
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/components/img-loader/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="img-loader">
    <view v-if="isLoadError" class="l-error">
      <image :src="'default.png' | prefixOssUrl" />
    </view>
    <view v-else class="l-img">
      <image :src="imgUrl" alt @error="imgError" />
    </view>
  </view>
</template>

<script>
import {
  appConfig
} from '../../config/app'
let httpsReg = /^https:\/\//

let ossUrl = appConfig.ossUrl;

export default {
  props: ['src'],
  data () {
    return {
      ossUrl,
      isLoadError: false
    }
  },
  computed: {
    imgUrl () {
      if (httpsReg.test(this.src)) {
        return this.src
      } else {
        return this.src ? `${this.ossUrl}${this.src}?x-oss-process=image/resize,m_mfit,h_300` : this.$options.filters
          .prefixOssUrl('default.png')
      }
    }
  },
  methods: {
    imgError () {
      this.isLoadError = true
    }
  },
  watch: {
    src () {
      this.isLoadError = false
    }
  }
}
</script>


<style lang="less">
.img-loader {
  width: 100%;
  height: 100%;

  .l-img {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
  }

  .l-error {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f8f8f8;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>